<template>
  <div>
    <el-row style="height:100px">
      <el-col :span="8">
        <div class="grid-content bg-purple"></div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content bg-purple-light">
          <div @click="oneC()" style="float:left;cursor: pointer">耗电量月统计 |</div>
          <div @click="twoC()" style="float:left;cursor: pointer">耗电分类统计 |</div>
          <div @click="threeC()" style="cursor: pointer">水流量月分类统计</div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content bg-purple"></div>
      </el-col>
    </el-row>
  <el-row style="height:50px">
    	<el-cascader  change-on-select :options="treeInBuildData" @change="handleItemChange" :props="props"></el-cascader>
    </el-row>
    <el-row>
      <el-col :span="24" >
        <div id="myChart1" style="width:100%" :style="{ height: '600px'}"></div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  data() {
    return {
    	 treeInBuildData:[],
    	  props: {
					value: 'id',
					label: 'name',
					children: 'sub'
				}
    };
  },
  mounted() {
    this.getData1();
  },
  methods: {
  	////获取楼层数据书结构
			getBuildDataInTree() {
				this.$httpRequest.get('api/Build/GetBuildTree', "", res => {
					this.treeInBuildData = res.data
					console.log(this.treeInBuildData);
				})
			},
      oneC() {
      debugger;
        this.$router.push({
            path: "/echarts"
          });
    },
    twoC() {
     this.$router.push({
            path: "/echartsOne"
          });
    },
    threeC() {
      debugger;
      this.$router.push({
            path: "/echartsTwo"
          });
    },
    getData1() {
      //耗电分类统计
      this.$httpRequest.get("api/Device/GetTypeReport", "", res => {
        debugger;
        // 基于准备好的dom，初始化echarts实例
        let myChart1 = this.$echarts.init(document.getElementById("myChart1"));
        var posList = [
          "left",
          "right",
          "top",
          "bottom",
          "inside",
          "insideTop",
          "insideLeft",
          "insideRight",
          "insideBottom",
          "insideTopLeft",
          "insideTopRight",
          "insideBottomLeft",
          "insideBottomRight"
        ];
        var app = {};
        app.configParameters = {
          rotate: {
            min: -90,
            max: 90
          },
          align: {
            options: {
              left: "left",
              center: "center",
              right: "right"
            }
          },
          verticalAlign: {
            options: {
              top: "top",
              middle: "middle",
              bottom: "bottom"
            }
          },
          position: {
            options: this.$echarts.util.reduce(
              posList,
              function(map, pos) {
                map[pos] = pos;
                return map;
              },
              {}
            )
          },
          distance: {
            min: 0,
            max: 100
          }
        };

        app.config = {
          rotate: 90,
          align: "left",
          verticalAlign: "middle",
          position: "insideBottom",
          distance: 15,
          onChange: function() {
            var labelOption = {
              normal: {
                rotate: app.config.rotate,
                align: app.config.align,
                verticalAlign: app.config.verticalAlign,
                position: app.config.position,
                distance: app.config.distance
              }
            };
            myChart.setOption({
              series: [
                {
                  label: labelOption
                },
                {
                  label: labelOption
                },
                {
                  label: labelOption
                },
                {
                  label: labelOption
                }
              ]
            });
          }
        };

        var labelOption = {
          normal: {
            show: true,
            position: app.config.position,
            distance: app.config.distance,
            align: app.config.align,
            verticalAlign: app.config.verticalAlign,
            rotate: app.config.rotate,
            formatter: "{c}  {name|{a}}",
            fontSize: 16,
            rich: {
              name: {
                textBorderColor: "#fff"
              }
            }
          }
        };
        for (let i = 0; i < res.data.series.length; i++) {
          res.data.series[i].label = labelOption;
        }
        //myChart1.setOption(option);
        myChart1.setOption({
          title: {
            text: "水流量月分类统计"
          },
          color: ["#003366", "#006699", "#4cabce", "#e5323e"],
          title: {
            text: "耗电分类统计"
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow"
            }
          },
          legend: {
            data: res.data.legend
          },
          toolbox: {
            show: true,
            orient: "vertical",
            left: "right",
            top: "center",
            feature: {
              mark: {
                show: true
              },
              dataView: {
                show: true,
                readOnly: false
              },
              magicType: {
                show: true,
                type: ["line", "bar", "stack", "tiled"]
              },
              restore: {
                show: true
              },
              saveAsImage: {
                show: true
              }
            }
          },

          calculable: true,
          xAxis: [
            {
              type: "category",
              axisTick: {
                show: false
              },
              data: ["2012", "2013", "2014", "2015", "2016"]
            }
          ],
          yAxis: [
            {
              type: "value"
            }
          ],
          series: res.data.series
        });
      });
    }
  }
};
</script>